<template>
  <div class="flex-1 flex-column" style="background-color: white;margin: 24px;padding: 20px 0">
    <div class="flex-column" style="margin: 0 32px">
      <span class="detail-title">基本信息</span>
      <a-divider style="margin: 15px 0"/>
    </div>
    <div class="flex-column" style="width: 100%;margin-top: 20px">
      <a-row type="flex" justify="center" style="width: 100%">
        <m-col-v>
          <m-form-v :form="form" @submit="handleSubmit">
            <a-form-item label="分组名称">
              <a-input placeholder="请输入分组名称"
                       v-decorator="['patrolName', { rules: [{ required: true, message: '请输入分组名称!' }] }]"
                       :allowClear="true"/>
            </a-form-item>
            <a-form-item label="分组类型">
              <a-radio-group v-decorator="['type', {initialValue: 1, rules: [{ required: true}]}]"
                            style="width: 100%;" @change="typeChange($event)">
                <a-radio :value="1">固定商品</a-radio>
                <a-radio :value="2">可选商品</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="限购份数" v-if="show">
              <a-input-number placeholder="请输入限购份数" style="width: 100%;" :min="0" :precision="0" v-decorator="['peer', { rules: [{ required: true, message: '请输入限购份数!' }] }]" :allowClear="true"/>
            </a-form-item>

            <!-- <a-form-item label="同一商品可点多份" v-if="show">
              <a-switch v-decorator="['singleCheck', {valuePropName: 'singleCheck', rules: [{ required: true, message: '请输入限购份数!' }] }]"
              @change="singleChange($event)"/>
            </a-form-item> -->

            <a-form-item label="同一商品可点多份" v-if="show">
              <!-- <a-switch v-decorator="['singleCheck', {valuePropName: 'singleCheck', rules: [{ required: true, message: '请输入限购份数!' }] }]"
              @change="singleChange($event)"/> -->
              <a-switch v-model="singleMore" checkedChildren="是" unCheckedChildren="否" style="width: 60px;;"
              v-decorator="['singleCheck', {valuePropName: 'singleCheck', rules: [{ required: true, message: '请输入限购份数!' }] }]"/>
            </a-form-item>
                  
            <a-form-item label="选择商品">
              <a-select mode="multiple" placeholder="请选选择商品"
                        v-decorator="['assetTypes', { rules: [{ required: true, message: '请选选择商品!'}] }]"
                        option-filter-prop="children" show-search>
                <template v-for="item in productList">
                  <a-select-option :key="item.value" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </template>
              </a-select>
            </a-form-item>
           
            <a-form-item label="备注">
              <a-textarea placeholder="请输入备注" v-decorator="['remark', { rules: [{ required: false}]}]"
                          :allowClear="true" :auto-size="{ minRows: 3}"/>
            </a-form-item>

            <div class="flex-row-center" style="height: 50px;margin-top: 30px;width: 100%;justify-content: center">
              <a-button  @click="back" style="margin-right: 15px">
                取消
              </a-button>
              <a-button type="primary" html-type="submit">
                保存
              </a-button>
            </div>
          </m-form-v>
        </m-col-v>
      </a-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      span: 11,
      form: this.$form.createForm(this, {name: 'group'}),
      type: undefined,
      signDate: '',
      groupId: undefined,

      previewVisible: false,
      previewImage: '',
      //图片上传地址
      actionUrl: '/client/xxxx',
      loading: false,
      fileList: [],
      productList:[
        {label:'商品1',value:1},
        {label:'商品2',value:2},
        {label:'商品3',value:3},
        {label:'商品4',value:4},
        {label:'商品5',value:5},
        {label:'商品6',value:6},
      ],
      show:false,
      singleMore:true
    }
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    typeChange(e){
      console.log('e', e);
      // let type = this.form.getFieldValue('type');
      let type = e.target.value;
      console.log('type', type);
      this.show = (type == 2);
    },
    singleChange(e){
      //true false
      console.log('e', e);
      // let s = e.target.value;
      // console.log('s', s);
    },
    getInfo() {
      //获取详情
      let self = this;
      if (this.$route.query.groupId) {
        this.$util.showLoading(self);
        this.groupId = this.$route.query.groupId;
        let p = {
          groupId: this.groupId
        }

        // this.$util.showLoading(this);
        // this.$util.get('xxxx', p, true).then((res) => {
        //   this.$util.hideLoading();
        //   console.log(111, res);
        //   let dao = res.content;

        //   self.form.setFieldsValue({
        //     groupName: dao.groupName,
        //     type: dao.type,
        //     remark: dao.REMARK
        //   })
        // })

        self.form.setFieldsValue({
            singleCheck: true,
        })
      } else {
        self.form.setFieldsValue({
            singleCheck: true,
        })
      }
    },

    handleSubmit(e) {
      e.preventDefault();
      let self = this;
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log('values', values);
          // let p = values;
          // if (this.groupId) {
          //   p.groupId = this.groupId;
          // }

          // let picList = [];
          // if (self.fileList.length > 0) {
          //   //处理上传的图片
            
          // }
          // //提交接口
          // this.$util.post('xxx', p).then((res) => {
          //   console.log(res);
          //   self.back();
          // });
          self.back();
        }
      });
    },
    back() {
      this.$router.back();
    },
    uploadCallback({file, fileList}) {
      this.fileList = fileList;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await this.$util.getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;

      this.previewVisible = true;
    },
    handleRemove(file) {
      // file.status = '1';
      // let name = '';
      // if (file.response) {
      //   name = file.response.initialPreviewConfig[0].key
      // } else {
      //   name = file.name
      // }
      // //调用删除文件接口
      // this.$util.post("xxx", {key: name});
    },
  }
}
</script>

<style scoped>

</style>
